<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" type="image/ico" href="/images/favicon.ico">
    <title>添加love纸条</title>
    <script src="/javascripts/jquery-1.11.3.min.js" type="text/javascript"></script>
    <style>
        .alert-info{
            background:#fafad2;
            padding:5px;
            width:400px;
        }
        .alert-info p{
            font-size: 13px;
            line-height: 1.5;
            margin:5px 0;
            border-radius:5px;
        }
        .main{
            width:800px;
            margin:0 auto;
        }
        .left{
            width:240px;
            float:left;
            margin-right:20px;
            border-right:1px solid #eee;
        }
        .right{
            width:450px;
            min-height:400px;
            float:left;
        }
        h3{
            font-size: 16px;
            border-left:5px solid #eee;
            padding-left:5px;
            margin-bottom:8px;
        }
        .bg-selector{
            display:inline-block;
            width:25px;
            height: 25px;
            margin:3px 5px;
            border:1px solid #333;
            cursor: pointer;
        }
        #search-result-panel{
            height:140px;
            width:200px;
            background: #fff;
            border:1px solid #ccc;
        }
        .lovewall-panel-header{
            color:#222;
            font-size: 12px;
            padding: 5px;
            border-bottom:1px dashed #eee;
        }
        .lovewall-panel-body{
            padding:8px;
            font-size:13px;
        }
        .chooseFontStyle{
            list-style: none;
            padding:0;
            width:200px;
        }
        .chooseFontStyle li{
            display:inline-block;
            width: 90px;
            height: 25px;
            line-height: 25px;
            border:1px solid #eee;
            cursor: pointer;
            margin-top:0;
            margin-bottom:4px;
        }
        .button_p{
            width:405px;
        }
        .button_p button{
            display: block;
            float:right;
            margin:0;
            padding:5px 20px;
            cursor: pointer;
            background:
        }
        .copyright{
            float:left;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="left">
        <div class="left_1">
            <h3>纸条样式预览</h3>
            <div id="search-result-panel" class="lovewall-panel" >
                <div class="lovewall-panel-header">
                    第 999 条&nbsp;&nbsp;2016-05-20 13:14:00
                </div>
                <div class="lovewall-panel-body" >
                    <span class="lovewall-font">总有一天，我们会过上我一翻身就可以偷亲你的日子!</span>
                </div>
            </div>
        </div>
        <div class="left_2">
            <h3>选择背景颜色</h3>
            <div class="chooseColor">
                <div>
                    <span class="bg-selector" onclick="chooseColor(this)" style="background-color: #ffffff;" color="#ffffff"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #ffffcc;" color="#ffffcc"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #ffcc33;" color="#ffcc33"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #ccff99;" color="#ccff99"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #ff4b1c;" color="#ff4b1c"></span>
                </div>
                <div>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #ffcccc;" color="#ffcccc"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #ff9999;" color="#ff9999"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #66ff99;" color="#66ff99"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #669999;" color="#669999"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #cc99cc;" color="#cc99cc"></span>
                </div>
                <div>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #cc9966;" color="#cc9966"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #33ccff;" color="#33ccff"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #eeeeee;" color="#eeeeee"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #ff8dde;" color="#ff8dde"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #fffa48;" color="#fffa48"></span>
                </div>
                <div>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #f60;" color="#f60"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #bdb76b;" color="#bdb76b"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #f0e68c;" color="#f0e68c"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #daa520;" color="#daa520"></span>
                    <span class="bg-selector" onclick="chooseColor(this)"  style="background-color: #fafad2;" color="#fafad2"></span>
                </div>
            </div>
        </div>

        <div class="left_3">
            <h3>选择字体、字号</h3>
            <ul style="font-size:16px;" class="chooseFontStyle">
                <li style="font-family:微软雅黑" onclick="chooseFontStyle(this)">微软雅黑</li>
                <li style="font-family:方正舒体" onclick="chooseFontStyle(this)">方正舒体</li>
                <li style="font-family:宋体" onclick="chooseFontStyle(this)">宋体</li>
                <li style="font-family:仿体" onclick="chooseFontStyle(this)">仿宋</li>
                <li style="font-family:华文行楷" onclick="chooseFontStyle(this)">华文行楷</li>
                <li style="font-family:华文隶书" onclick="chooseFontStyle(this)">华文隶书</li>
                <li style="font-family:楷体" onclick="chooseFontStyle(this)">楷体</li>
                <li style="font-family:幼圆" onclick="chooseFontStyle(this)">幼圆</li>
                <li onclick="chooseFontSize(this)"  val="12px" >12号</li>
                <li onclick="chooseFontSize(this)"  val="13px" >13号</li>
                <li onclick="chooseFontSize(this)"  val="14px" >14号</li>
                <li onclick="chooseFontSize(this)"  val="15px" >15号</li>
            </ul>
        </div>
    </div>
    <div class="right">
        <h3>添加纸条祝福内容</h3>
        <div class="content" style="margin-top:10px;">
            <form action="addLoveNote" method="post" id="noteForm">
                <input type="hidden" class="bgColor" value="#fff" name="bgcolor"/>
                <input type="hidden" class="fontSize" value="13px" name="fontsize"/>
                <input type="hidden" class="fontStyle" value="宋体" name="fontstyle"/>
                <textarea maxlength="260" name="notecontent" id="inputContent" style="width:400px;height: 250px;" onkeyup="changeTextNum(this)"></textarea>
                <p class="button_p">
					<span style="font-size:13px;">剩余
					<strong class="textNum" style="color:red;font-size:15px;">260</strong>
					个文字</span>
                    <button type="button" onclick="submitNote()">提 交</button>
                </p>
            </form>
        </div>
        <div class="copyright" style="margin-top:40px;">
            <div class="alert-info">
                <p>1.请勿发布有违法律、道德以及不良信息的内容。</p>
                <p>2.本站保留随时删除此类纸条的权利。删除这些纸条之前不会通知发布人。</p>
                <p>3.本站部分素材来源于互联网，如有侵权请及时联系 354867750c@gmail.com。</p>
            </div>
        </div>
    </div>
</div>
<script>

    function submitNote(){
        $.ajax({
            type:"post",
            url:"addLoveNote",
            data:$("#noteForm").serialize(),
            beforeSend:function(){
                var content = $("#inputContent").val();
                if(!($.trim(content)).length>0){
                    alert("请输入纸条内容!");
                    return false;
                }
            },
            success:function(result){
                if(parseInt(result)>0){
                    alert("纸条发布成功！请牢记您的纸条编号：["+result+"] ，赶快分享给您的好友吧！");
                    window.close();
                }else{
                    alert("Sorry，数据提交失败！");
                }
            },
            error:function(error){
                alert("网络出错，请稍后重试！"+error.toString);
            }
        });
        return false;
    }

    function chooseColor(thisObj){
        var color = $(thisObj).attr("color");
        $("#search-result-panel").css("background",color);
        $(".bgColor").val(color);
    }

    function chooseFontSize(thisObj){
        var val = $(thisObj).attr("val");
        $(".lovewall-font").css("font-size",val);
        $(".fontSize").val(val);
    }
    function chooseFontStyle(thisObj){
        var val = $(thisObj).text();
        $(".lovewall-font").css("font-family",val);
        $(".fontStyle").val(val);
    }
    function changeTextNum(thisObj){
        content = $(thisObj).val();
        $(".textNum").text(260-content.length);
    }
</script>
</body>
</html>